import React from 'react';
import {Button, Card, Form, Select} from 'antd';
import axios from './../../axios';
import detail from './detail.less';


export default class OrderDetail extends React.Component {
    state = {};

    componentDidMount() {
        let orderId = this.props.match.params.orderId
        console.log('orderId', orderId);
        if (orderId) {
            this.getDetailInfo(orderId)
        }


    }


    getDetailInfo = (orderId) => {
        axios.ajax({
            url: '/order/detail',
            data: {
                params: {
                    orderId
                }
            }
        }).then((res) => {
            if (res.code === '0') {
                this.setState({
                    orderInfo: res.result
                })
                setTimeout(() => {
                    this.renderMap(res.result)
                }, 1000)

            }
        })
    };

    //BMap存在于window下面，react是单页面，想要使用某个模块，必须引入
    renderMap = (result) => {
        this.map = new window.BMap.Map('orderDetailMap');
        // 添加地图控件
        this.addMapControl();
        //调用路线图绘制方法
        this.drawBikeLine(result.position_list);
        // 调用服务区绘制方法
        this.drwaServiceArea(result.area);

    };


    addMapControl = () => {
        let map = this.map;
        map.addControl(new window.BMap.ScaleControl({anchor: window.BMAP_ANCHOR_TOP_RIGHT}));
        map.addControl(new window.BMap.NavigationControl({anchor: window.BMAP_ANCHOR_TOP_RIGHT}));

    };


    //绘制行驶路线
    drawBikeLine = (positionList) => {
        let map = this.map;
        let startPoint = '';
        let endPoint = '';

        if (positionList.length > 0) {
            const startItem = positionList[0];
            const endItem = positionList[positionList.length - 1];

            //获取地图可用的经纬度：起始坐标点  两个参数item.lon,item.lat  经纬度
            startPoint = new window.BMap.Point(startItem.lon, startItem.lat);
            let startIcon = new window.BMap.Icon('/assets/start_point.png', new window.BMap.Size(36, 42), {
                imageSize: new window.BMap.Size(36, 42),
                anchor: new window.BMap.Size(18, 42)
            })

            //Marker  覆盖物：有坐标和图标就可以在绘制出一个覆盖物
            let startMarker = new window.BMap.Marker(startPoint, {icon: startIcon});
            this.map.addOverlay(startMarker);


            endPoint = new window.BMap.Point(endItem.lon, endItem.lat);
            //设置坐标点要显示什么图标
            let endIcon = new window.BMap.Icon('/assets/end_point.png', new window.BMap.Size(36, 42), {
                imageSize: new window.BMap.Size(36, 42),
                //控制偏移量：
                anchor: new window.BMap.Size(18, 42)
            })
            let endMarker = new window.BMap.Marker(endPoint, {icon: endIcon});
            this.map.addOverlay(endMarker);


            // 连接路线图
            //遍历出路线图的每个点坐标

            let trackPoint = [];
           for (let i=0;i<positionList.length;i++) {
               let point = positionList[i]
               trackPoint.push(new window.BMap.Point(point.lon,point.lat))
           }

           //绘制路线   Polyline绘制直线
            let polyline = new window.BMap.Polyline(trackPoint, {
                strokeColor: '#1869AD',
                strokeWeight: 3,
                strokeOpacity: 1
            })
            //addOverlay 添加组件到地图
            this.map.addOverlay(polyline);
            //设置地图中心点
            this.map.centerAndZoom(endPoint, 11);

        }
    };


    drwaServiceArea = (areaList) => {

        // 取服务区坐标点
        let trackPoint = [];
        for (let i = 0; i < areaList.length; i++) {
            let point = areaList[i];
            trackPoint.push(new window.BMap.Point(point.lon, point.lat));
        }
        // 绘制服务区
        let polygon = new window.BMap.Polygon(trackPoint, {
            strokeColor: '#CE0000',
            strokeWeight: 4,
            strokeOpacity: 1,
            fillColor: '#ff8605',
            fillOpacity:0.4
        })
        this.map.addOverlay(polygon);
    };

    render() {
        const info = this.state.orderInfo || {};

        return (
            <div>
                <Card>
                    <div id="orderDetailMap" className="order-map"></div>
                    <div className="detail-items">
                        <div className="item-title">基础信息</div>
                        <ul className="detail-form">
                            <li>
                                <div className="detail-form-left">用车模式</div>
                                <div className="detail-form-content">{info.mode == 1 ? '服务区' : '停车点'}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">订单编号</div>
                                <div className="detail-form-content">{info.order_sn}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">车辆编号</div>
                                <div className="detail-form-content">{info.bike_sn}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">用户姓名</div>
                                <div className="detail-form-content">{info.user_name}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">手机号码</div>
                                <div className="detail-form-content">{info.mobile}</div>
                            </li>
                        </ul>
                    </div>
                    <div className="detail-items">
                        <div className="item-title">行驶轨迹</div>
                        <ul className="detail-form">
                            <li>
                                <div className="detail-form-left">行程起点</div>
                                <div className="detail-form-content">{info.start_location}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">行程终点</div>
                                <div className="detail-form-content">{info.end_location}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">行驶里程</div>
                                <div className="detail-form-content">{info.distance / 1000}公里</div>
                            </li>
                        </ul>
                    </div>
                </Card>
            </div>
        );
    }


}
